<template>
  <div>
    <van-action-bar>
      <van-action-bar-icon icon="home-o" text="首页" to="/" />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        @click="goCartPage"
        :badge="cartsNum"
      />
      <van-action-bar-button
        type="danger"
        text="加入购物车"
        @click="onClickButton"
      />
    </van-action-bar>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';
import useCartStore from '@/stores/cart';
import { showToast } from 'vant';
import 'vant/es/toast/style';
const route = useRoute();
const router = useRouter();
const cartStore = useCartStore();
const { cartsNum } = storeToRefs(cartStore);
const onClickButton = () => {
  cartStore.addCart({
    goods_id: Number(route.params.id),
    num: 1,
  });
  showToast({
    message: '操作成功',
    icon: 'success',
    color: '#1989fa',
  });
};
const goCartPage = () => {
  router.push('/cart');
};
</script>

<style lang="scss" scoped></style>
